<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{margin:0;padding:0}
        #box {width: 380px;height: 50px; margin: 0px auto;border:1px solid #000;line-height: 50px; border-bottom: 0;text-align: center;}
        #calendar{width:340px;margin:0px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
        #calendar h4{width: 210px; height: 10px; text-align:center; margin-bottom:10px}
        #calendar .a1{ position:absolute;top:5px;left:18px;text-decoration: none;color: darkseagreen;}
        #calendar .span{ position: absolute;top:5px;left:85px;}
        #calendar .span1{ position: absolute;top:115px;left:265px;}
        #calendar .a2{ position:absolute;top:5px;right:150px;text-decoration: none;color: darkseagreen;}
        #calendar .week{width: 210px;height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
        #calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
        #calendar .dateList{width: 210px; overflow:hidden; clear:both}
        #calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
        #calendar .dateList .ccc{ color:#ccc;}
        #calendar .dateList .red{ background:#F90; color:#fff;}
        #calendar .dateList .sun{ color:#f00;}
    </style>

</head>
<body>
    <div id=box></div>
    <div id="calendar">
        <h4 id="title"></h4>
        <a href="javascript:;" class="a1" id="prev">上月</a>
        <span class="span" id="span"></span>
        <a href="javascript:;" class="a2" id="next">下月</a>
        <span class="span1" id="span1"></span>
        <ul class="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul class="dateList" id="dateList"></ul>
    <script>
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var dateList = document.getElementById('dateList'); 
        var span = document.getElementById('span');
        var span1 = document.getElementById('span1');
        var box = document.getElementById('box');
        var n = 0
        time(n);
        function time(n){
            var d = new Date();
            d.setMonth(d.getMonth()+n);
            setInterval(function(){
                var d = new Date();
                var hours = d.getHours();
                var minute = d.getMinutes();
                var scd = d.getSeconds();
                var week = d.getDay()     
                span1.innerHTML = hours+' : '+minute+' : '+ scd+'<br>&nbsp;&nbsp;&nbsp;&nbsp;星期'+week;               
            },10)
            var years = d.getFullYear();
            var months = d.getMonth()+1;
            var days = d.getDate();
            span.innerHTML = years + '年'+months+'月'
            box.innerHTML = years + '年'+months+'月'+days+'日'
            var toDay = d.getDate();
            d.setDate(1);
            var startTime = d.getDay();  //1号星期几
            d.setMonth(d.getMonth()+1,0)
            var startDay = d.getDate(); // 本月多少号
            var endTime = d.getDay(); // 最后一号是星期几
            d.setDate(0)
            var upDay = d.getDate(); //上月最大多少号
            d.setMonth(d.getMonth()+1,1); //把月份改到到当前月
            var str = ''
            for(var i=1;i<=startTime;i++){
                var k = upDay;
                k = upDay-startTime+i
                str += '<li class="ccc">'+k+'</li>'
            }
            for(var i=1;i<=startDay;i++){
                if(toDay == i){
                    str += '<li class="red">'+i+'</li>'
                }else if((startTime+i)%7==0 || (startTime+i)%7==1){
                    str += '<li class="sun">'+i+'</li>'
                }else{
                    str += '<li>'+i+'</li>'
                }
            }
            for(var j=1;j<7-endTime;j++){
                str += '<li class="ccc">'+j+'</li>'
            }
            dateList.innerHTML = str;
            
            return n;
        }
        prev.onclick = function(){
            n--;
            time(n);
        }
        next.onclick = function(){
            n++;
            time(n);
        }
    </script>
</body>
</html>